<template>
    <div class="cm-bg-c">
        <el-row>
            <el-col :span="12">
                <el-alert
                    v-if="status === 0"
                    title="恭喜您，已完成支付账户开通！完善信息立即报备，完成最后的配置吧~"
                    type="success"
                    show-icon />
                <el-form class="zw-el-form" ref="formRef" :rules="rules" :model="form" label-width="140px">
                    <el-row class="zw-form-item zw-form-special" v-if="status === 0">
                        <el-col>
                            <el-form-item label="企业名称">
                                <div>{{ entObj.merchantName }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item zw-form-special" v-if="status === 0">
                        <el-col>
                            <el-form-item label="登录号">
                                <div>{{ entObj.loginNo }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item zw-form-special form-item-margin" v-if="status === 0">
                        <el-col>
                            <el-form-item label="客户账户号">
                                <div>{{ entObj.contractNo || '' }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- <el-row class="zw-form-item">
                        <el-col>
                            <el-form-item label="商户号" prop="channelId">
                                <el-input
                                    maxlength="20"
                                    v-model.trim="form.channelId"
                                    :disabled="status === 0"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col>
                            <el-form-item label="终端号" prop="business">
                                <el-input
                                    maxlength="20"
                                    v-model.trim="form.business"
                                    :disabled="status === 0"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row> -->
                    <el-row class="zw-form-item">
                        <el-col>
                            <el-form-item label="商户简称" prop="merchantShortName">
                                <el-input
                                    maxlength="20"
                                    v-model.trim="form.merchantShortName"
                                    show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- <el-row class="zw-form-item">
                        <el-col>
                            <el-form-item label="联系人" prop="contact">
                                <el-input maxlength="20" v-model.trim="form.contact" show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row> -->
                    <el-row class="zw-form-item">
                        <el-col>
                            <el-form-item label="手机号" prop="contactPhone">
                                <el-input maxlength="20" v-model.trim="form.contactPhone" show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col>
                            <el-form-item label="经营类目" prop="categoriesFirst">
                                <el-select
                                    v-model="form.categoriesFirst"
                                    class="zw-select-margin"
                                    @change="changeHandler"
                                    placeholder="经营类目">
                                    <el-option
                                        v-for="item in categories"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col>
                            <el-form-item label="地址信息" prop="areatext">
                                <div class="area-wrapper">
                                    <el-select
                                        v-model="form.provinceValue"
                                        class="zw-select-margin"
                                        @change="provinceHandler"
                                        placeholder="省份">
                                        <el-option
                                            v-for="item in provinceList"
                                            :key="item.code"
                                            :label="item.name"
                                            :value="item.code" />
                                    </el-select>
                                    <el-select
                                        v-model="form.cityValue"
                                        class="zw-select-margin"
                                        placeholder="城市"
                                        @change="cityHandler"
                                        no-data-text="请选择省份">
                                        <el-option
                                            v-for="item in cityList"
                                            :key="item.code"
                                            :label="item.name"
                                            :value="item.code" />
                                    </el-select>
                                    <el-select
                                        v-model="form.districtValue"
                                        placeholder="区域"
                                        @change="districtHandler"
                                        no-data-text="请选择城市">
                                        <el-option
                                            v-for="item in districtList"
                                            :key="item.code"
                                            :label="item.name"
                                            :value="item.code" />
                                    </el-select>
                                </div>
                                <div class="area-text-wrapper">
                                    <el-input
                                        class="area-text"
                                        maxlength="40"
                                        v-model.trim="form.address"
                                        type="textarea"
                                        :rows="10"
                                        placeholder="详细地址"
                                        show-word-limit></el-input>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col>
                            <el-form-item label="商户证件类型" prop="paperValue">
                                <el-select
                                    v-model="form.paperValue"
                                    class="zw-select-margin"
                                    @change="paperHandler"
                                    placeholder="证件类型">
                                    <el-option
                                        v-for="item in paperList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col>
                            <el-form-item label="商户证件编号" prop="businessLicense">
                                <el-input maxlength="20" v-model.trim="form.businessLicense" show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col>
                            <el-form-item label="银行开户行名称" prop="bankBranchName">
                                <el-input maxlength="20" v-model.trim="form.bankBranchName" show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col>
                            <el-form-item label="银行卡号" prop="cardNo">
                                <el-input maxlength="20" v-model.trim="form.cardNo" show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col>
                            <el-form-item label="银行卡持卡人姓名" prop="cardName">
                                <el-input maxlength="20" v-model.trim="form.cardName" show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-col>
            <div class="footer">
                <div class="divider"></div>
                <el-button type="primary" @click="submitHandler">申请报备</el-button>
            </div>
        </el-row>
    </div>
</template>
<script setup>
import { ref, reactive, watch } from 'vue';
import request from '@/request';
import storage from '@/commons/storage';
import { isNotEmpty, getRegExp } from '@/commons/utils';
const emit = defineEmits(['submit']);
const entObj = ref(storage.get('ZW-TENANT-LOGINNO'));
const formRef = ref(null);
const form = reactive({
    // /** 渠道商户号*/
    // channelId: '',
    // /** 终端号？文档未备注，未找到终端号*/
    // business: '',
    /** 商户简称*/
    merchantShortName: '',
    /** 联系人*/
    // contact: '',
    /** 联系人电话*/
    contactPhone: '',
    /** 经营类目*/
    categoriesFirst: '',
    /** 地址信息*/
    areatext: '',
    /** 省份code*/
    provinceValue: '',
    /** 城市code*/
    cityValue: '',
    /** 区域code*/
    districtValue: '',
    /** 详细地址*/
    address: '',
    /** 证据类型code*/
    paperValue: '',
    /** 商户证件编号*/
    businessLicense: '',
    /** 银行开户行名称*/
    bankBranchName: '',
    /** 银行卡号*/
    cardNo: '',
    /** 银行持卡人姓名*/
    cardName: ''
});
let categories = ref([]);
const paperList = reactive([
    {
        value: 'NATIONAL_LEGAL',
        label: '营业执照'
    },
    {
        value: 'NATIONAL_LEGAL_MERGE',
        label: '营业执照(多证合一)'
    },
    {
        value: 'INST_RGST_CTF',
        label: '事业单位法人证书'
    }
]);
const provinceList = reactive([]);
const cityList = reactive([]);
const districtList = reactive([]);
const rules = reactive({
    // channelId: [{ required: true, message: '请输入商户号', trigger: 'blur' }],
    // business: [{ required: true, message: '请输入终端号', trigger: 'blur' }],
    merchantShortName: [
        { required: true, message: '请输入商户简称', trigger: 'blur' },
        {
            pattern: getRegExp('chinese'),
            message: '只能输入中文',
            trigger: 'blur'
        }
    ],
    // contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
    contactPhone: [
        { required: true, message: '请输入联系人手机号', trigger: 'blur' },
        { pattern: getRegExp('phone'), message: '手机号格式不正确', trigger: 'blur' }
    ],
    categoriesFirst: [{ required: true, message: '请选择经营类目', trigger: 'blur' }],
    areatext: [{ required: true, message: '请完善地址信息', trigger: 'blur' }],
    paperValue: [{ required: true, message: '请选择商户证件类型', trigger: 'select' }],
    businessLicense: [{ required: true, message: '请输入商户证件编号', trigger: 'blur' }],
    bankBranchName: [
        { required: true, message: '请输入银行开户行名称', trigger: 'blur' },
        {
            pattern: getRegExp('chinese'),
            message: '只能输入中文',
            trigger: 'blur'
        }
    ],
    cardNo: [
        { required: true, message: '请输入银行卡号', trigger: 'blur' },
        {
            pattern: getRegExp('bankcard'),
            message: '银行卡号格式不正确',
            trigger: 'blur'
        }
    ],
    cardName: [
        { required: true, message: '请输入银行卡持卡人姓名', trigger: 'blur' },
        {
            pattern: getRegExp('chinese'),
            message: '只能输入中文',
            trigger: 'blur'
        }
    ]
});
const status = ref(0);

watch(
    [() => form.provinceValue, () => form.cityValue, () => form.districtValue, () => form.address],
    newvalue => {
        if (newvalue[0] && newvalue[1] && newvalue[2] && newvalue[3]) {
            form.areatext = 'complete';
        } else {
            form.areatext = '';
        }
    },
    {
        deep: true
    }
);

/**
 * 获取经营类目
 */
const getCateList = async () => {
    const res = await request('baofuEntCategory');
    categories.value = res.data;
};
getCateList();

/**
 * 经营类目
 */
const changeHandler = val => {
    if (isNotEmpty(val)) {
        form.categoriesFirst = val;
        formRef.value.validateField('categoriesFirst');
    }
};

// 初始化 获取省市区数据
const initRegionList = () => {
    request('regionServ', { level: 3 }).then(res => {
        res.data.map(item => {
            provinceList.push(item);
        });
    });
};
initRegionList();

/**
 * 省份选择
 */
const provinceHandler = value => {
    form.cityValue = '';
    form.districtValue = '';
    cityList.length = 0;
    districtList.length = 0;
    provinceList
        .find(item => item.code === value)
        .children.map(item => {
            cityList.push(item);
        });
};

/**
 * 城市选择
 */
const cityHandler = value => {
    form.districtValue = '';
    districtList.length = 0;
    cityList
        .find(item => item.code === value)
        .children.map(item => {
            districtList.push(item);
        });
};

/**
 * 区域选择
 */
const districtHandler = value => {
    form.address && formRef.value.validateField('areatext');
};

/**
 * 证件类型
 */
const paperHandler = val => {
    if (isNotEmpty(val)) {
        form.paperValue = val;
        formRef.value.validateField('paperValue');
    }
};

const submitHandler = () => {
    formRef.value.validate(async valid => {
        if (valid) {
            await request('baofuReport', {
                merchantShortName: form.merchantShortName,
                servicePhone: form.contactPhone,
                business: form.categoriesFirst,
                addressInfo: {
                    provinceCode: form.provinceValue,
                    cityCode: form.cityValue,
                    districtCode: form.districtValue,
                    address: form.address
                },
                businessLicenseType: form.paperValue,
                businessLicense: form.businessLicense,
                bankBranchName: form.bankBranchName,
                cardNo: form.cardNo,
                cardName: form.cardName,
                loginNo: entObj.value.loginNo
            });
            const { data } = await request('baofuRegInfo', { tenantId: storage.get('ZW-TENANT-ID') });
            data.loginNo &&
                storage.set('ZW-TENANT-LOGINNO', {
                    loginNo: data.loginNo,
                    merchantName: data.merchantName,
                    email: data.email
                });
            /** 已报备*/
            data.simId && storage.set('ZW-TENANT-LOGINNO', { ...storage.get('ZW-TENANT-LOGINNO'), SIMID: data.simId });
            data.orgNo && storage.set('ZW-TENANT-LOGINNO', { ...storage.get('ZW-TENANT-LOGINNO'), orgNo: data.orgNo });
            data.contractNo &&
                storage.set('ZW-TENANT-LOGINNO', { ...storage.get('ZW-TENANT-LOGINNO'), contractNo: data.contractNo });
            emit('submit');
        }
    });
};
</script>
<style lang="scss" scoped>
@import './style.scss';

.zw-form-item {
    width: 100%;
}

.zw-form-special :deep(.el-form-item--large) {
    margin-bottom: 0;
}
.zw-form-special :deep(.el-form-item) {
    margin-bottom: 0;
}
.zw-form-special :deep(.el-form-item__label) {
    height: 28px;
    line-height: 28px;
    font-weight: 300;
    color: #33302d;
    font-size: 14px;
}
.zw-form-special :deep(.el-form-item__content) {
    height: 28px;
    line-height: 28px;
    font-weight: 300;
    color: #33302d;
    font-size: 14px;
}
.form-item-margin {
    margin-bottom: 17px;
}
.zw-el-form {
    margin-top: 16px;
}
.area-wrapper {
    display: flex;
    margin-bottom: 12px;
}

.area-text-wrapper {
    width: 100%;
}
.area-text-wrapper :deep(.el-textarea__inner) {
    resize: none;
    width: 100%;
    height: 60px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #eaeaea;
}

.zw-select-margin {
    margin-right: 8px;
}

.footer {
    width: 100%;
    height: 120px;
    text-align: left;
    box-sizing: border-box;
}
.divider {
    height: 2px;
    background-color: #eaeaea;
    margin: 30px 0;
}
.updoc-status {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 100px;

    .tip-img {
        width: 80px;
        height: 80px;
    }

    .tip-div {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 14px;
        font-weight: 300;
        color: #33302d;
        line-height: 14px;
        margin-left: 30px;
        height: 80px;

        .send {
            color: #4a90e2;
            cursor: pointer;
        }
    }
}
</style>
